import React, { useEffect, useState, memo, useMemo } from "react"
import { NavLink, useLocation, useNavigate } from "react-router-dom"

export default (props) => {

    const navigate = useNavigate()

    // # data

    const [load, setLoad] = useState(0)
    const [route, setRoute] = useState(useLocation())
    const [query, setQuery] = useState(() => {
        var temp = route.search && route.search.split('?')[1].split('&') || []
        var tempobj = {}
        for (var i = 0; i < temp.length; i++) {
            tempobj[temp[i].split('=')[0]] = temp[i].split('=')[1]
        }
        return tempobj
    })
    const [poster, setPoster] = useState(0)

    // # methods

    const tosetdom = () => {
        React.updateobj.updates = 1
        if ((window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) < 1000) {
            React.updateobj.updatename = 'dom'
            setPoster(() => 1)
        } else {
            React.updateobj.updatename = 'dom'
            setPoster(() => 0)
        }
    }

    const setdom = () => {
        tosetdom()
        window.addEventListener('resize', () => {
            tosetdom()
        })
    }

    // # mounted

    const mounted = () => {
        if (load == 0) {
            setLoad(() => 1)
            //
            if (JSON.stringify(query) == '{}') {
                navigate('/other_page/test', { replace: true })
            }
            setdom()
        }
    }

    // # update

    const updates = () => {
        if (React.updateobj.updatename == 'dom') {
            React.updateobj.updatename = ''
            tosetdom()
        }
    }

    // # destroyed

    const destroyeds = () => {
        if (React.updateobj.updates == 1) {
            setTimeout(() => {
                React.updateobj.updates = 0
            })
        } else {
            //这里是页面销毁的逻辑
        }
    }

    useEffect(() => {

        // # mounted

        mounted()

        // # update

        updates()

        // # destroyed

        return destroyeds

    }, [poster])

    return (
        <div template='1'>
            <div style={{ margin: 'auto' }}>
                <div style={{ margin: 20 }}>
                    <div style={{ width: '100%', height: 'calc((100vw - 40px) * 9 / 16)', backgroundColor: "black" }}>
                        <video src="" style={{ width: "100%", height: '100%' }} controls></video>
                    </div>
                </div>

                {(props.query.id == 1 || props.query.id == 2) ? (
                    // 普通视频
                    <div>
                        <div style={{ paddingTop: 20 }}>
                            <div style={{ float: 'left' }}>
                                <div style={{ marginLeft: 20, width: 60, height: 60, backgroundColor: "white", borderRadius: '50%' }}></div>
                            </div>
                            <div style={{ marginLeft: 100, marginRight: 20 }}>
                                <div style={{ width: '100%', height: 20, overflow: 'hidden', display: '-webkit-box', WebkitBoxOrient: ' vertical', WebkitLineClamp: 1, textOverflow: 'ellipsis', wordBreak: 'break-all' }}>用户名用户名用户名用户名用户名用户名用户名用户名用户名用户名用户名用户名用户名用户名用户名用户名</div>
                                <div style={{ marginTop: 10, width: '100%', height: 20, overflow: 'hidden', display: '-webkit-box', WebkitBoxOrient: ' vertical', WebkitLineClamp: 1, textOverflow: 'ellipsis', wordBreak: 'break-all', color: '#666' }}>简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</div>
                            </div>
                            <div style={{ clear: "both" }}></div>
                        </div>
                        <div style={{ padding: '20px 20px 0' }}>
                            <button style={{ padding: '10px 0', width: '50%', backgroundColor: '#4fa1ef', color: 'white' }}>订阅</button>
                            <button style={{ padding: '10px 0', marginLeft: 20, width: 'calc(50% - 20px)', backgroundColor: 'coral', color: 'white' }}>充电</button>
                        </div>
                        <div style={{ padding: '20px 20px 0' }}>
                            <div style={{ width: '100%', height: 20, overflow: 'hidden', display: '-webkit-box', WebkitBoxOrient: ' vertical', WebkitLineClamp: 1, textOverflow: 'ellipsis', wordBreak: 'break-all' }}>视频标题</div>
                            <div style={{ paddingBottom: 20 }}>
                                <div style={{ marginTop: 10, width: '100%', maxHeight: 200, overflow: "hidden auto", wordBreak: 'break-all', color: '#666' }}>视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介</div>
                            </div>
                        </div>
                        <div style={{ padding: '0px 20px 20px' }}>
                            <div style={{ marginBottom: 10, width: '100%', height: 20, whiteSpace: "nowrap" }}>弹幕总数</div>
                            <div style={{ maxHeight: 200, overflow: "hidden auto", backgroundColor: 'white' }}>
                                <div style={{ paddingBottom: 20 }}>
                                    {[1, 2, 3, 4, 5].map((v, i) => {
                                        return (
                                            <div style={{ paddingTop: 20, display: 'table' }} key={i}>
                                                <div style={{ display: "table-cell", width: '100%', verticalAlign: "top" }}>
                                                    <div style={{ paddingLeft: 20, height: 20, overflow: 'hidden', display: '-webkit-box', WebkitBoxOrient: ' vertical', WebkitLineClamp: 1, textOverflow: 'ellipsis', wordBreak: 'break-all' }}>11111</div>
                                                </div>
                                                <div style={{ display: "table-cell", verticalAlign: "top" }}>
                                                    <div style={{ width: 100 }}>
                                                        2020-10-10
                                                    </div>
                                                </div>
                                            </div>
                                        )
                                    })}
                                </div>
                            </div>
                        </div>
                    </div>
                ) : (
                    //影视选集
                    <div>
                        <div style={{ padding: '20px 20px 0' }}>
                            <div style={{ float: "left", width: poster ? '40%' : '30%' }}>
                                <div style={{ marginRight: 20, paddingBottom: '130%', backgroundColor: '#fff' }}></div>
                            </div>
                            <div style={{ marginLeft: poster ? '40%' : '30%' }}>
                                <div style={{ width: '100%', height: 20, overflow: 'hidden', display: '-webkit-box', WebkitBoxOrient: ' vertical', WebkitLineClamp: 1, textOverflow: 'ellipsis', wordBreak: 'break-all' }}>影视标题</div>
                                <div style={{ paddingBottom: 20 }}>
                                    <div style={{ marginTop: 10, width: '100%', maxHeight: 200, overflow: "hidden auto", wordBreak: 'break-all', color: '#666' }}>视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介视频简介</div>
                                </div>
                            </div>
                            <div style={{ clear: "both" }}></div>
                        </div>
                        <div style={{ paddingBottom: 20 }}>
                            <div style={{ padding: ' 0 0px 20px', margin: '20px 20px 0 20px', maxHeight: 200, overflow: 'hidden auto', backgroundColor: "white" }}>
                                {[100, 200, 300, 400, 500, 600, 700, 200, 300, 400, 500, 600, 700, 200, 300, 400, 500, 600, 700, 200, 300, 400, 500, 600, 700].map((v, i) => {
                                    return (
                                        <div style={{ display: 'inline-block', width: '20%' }} key={i}>
                                            <div style={{ padding: '10px 0', margin: '20px 10px 0', textAlign: 'center', border: '1px solid #666', whiteSpace: 'nowrap' }}>{v}</div>
                                        </div>
                                    )
                                })}
                            </div>
                        </div>
                    </div>
                )}

            </div>
        </div>
    )
}